import { ProFormItem, ProFormDigit } from '@ant-design/pro-form';
import { Segmented } from 'antd';
import { values } from 'lodash';

import FormJumpPage from '../../../costomFields/formJumpPage';
import WrapperForm from '../../wrapperForm';
import ImageRadio from '../../../costomFields/imageRadio';
import { rules, TPL_TYPE, BOR_STYLE, BG_SET } from '..';

import type { NavigationValue } from '..';

import styles from './index.less';
import type { Rule } from 'antd/lib/form';

interface INavigationFormProps {
  data: NavigationValue;
}

const NavigationForm: React.FunctionComponent<INavigationFormProps> = (props) => (
  // @ts-ignore
  <WrapperForm<NavigationValue> reducerName="updateData" {...props}>
    <ProFormItem label="选择模板" name="tplType" required rules={rules.tplType as Rule[]}>
      <ImageRadio options={values(TPL_TYPE)} />
    </ProFormItem>
    <ProFormItem label="背景设置" name="bgSetting" required className={styles['segment-father']}>
      <Segmented options={values(BG_SET)} />
    </ProFormItem>
    <ProFormDigit width={120} label="背景圆角" name="bgRadius" required />
    <ProFormItem label="边距设置" name="borderStyle" required className={styles['segment-father']}>
      <Segmented options={values(BOR_STYLE)} />
    </ProFormItem>
    <FormJumpPage name="navsData" label={'添加导航'} />
    <ProFormItem
      label={null}
      name="navsData"
      rules={[{ required: true, message: '请添加导航!' }]}
    />
  </WrapperForm>
);
export default NavigationForm;
